<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta content="webkit" name="renderer">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link type="text/css" rel="stylesheet" href="css/index.css" />
		<link type="text/css" rel="stylesheet" href="css/wdjp.css" />
         <script type="text/javascript" src="js/ty.js" ></script>
		<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
		<title>我的奖品</title>
		<script>
			var dh = '';
			$(function() {
				var url = window.location.href;　
				var aa = url.indexOf('=');
				if(aa == -1) {
					window.location.href = "index.html";
					return
				}
				dh = url.substring(aa + 1);
				getwdhjlist();


				$(".fh").click(function() {
		              choujian();
				});

          $(".tcimg").click(function() {
		               $("#jptk1").hide();
					  $("#jptk2").hide();
					  $("#jptk3").hide();
					  $("#jptk4").hide();
				});
				  $(".sy").click(function() {
		               shiyong();
				});
				 $(".zdl").click(function() {
		               $("#jptk1").hide();
					  $("#jptk2").hide();
					  $("#jptk3").hide();
					  $("#jptk4").hide();
				});

			});

			//获取获奖名单
			function getwdhjlist() {

				//验证成功  向服务器注册
				$.ajax({
					url: api + '/chongyin/homepage/getwojplist.do',
					data: {
						dh: dh
					},
					dataType: "jsonp",
					jsonp: 'callback',
					success: function(data) {
						console.log(data)
						var len = data.data.list.length;
						var str = "";
						var strtxt = "";
						var img ="";
						for(i = 0; i < len; i++) {
							if(data.data.list[i].isbj == 'Y') {
								strtxt = "查看凭证"
							} else {
								strtxt = "查看凭证"
							}
							str = str + "<div class=\"jp-nr\">";
							str = str + "<div class=\"jp-nr-lt\">";
							if(data.data.list[i].jpxh =='1'){
								str = str + "<div class=\"lttp\">"+ '<img class="img1" src="img/snd2.png" alt="" "/> '+"</div>"
							}else if(data.data.list[i].jpxh =='2'){
								str = str + "<div class=\"lttp\">"+ '<img class="img2" src="img/yyg2.png" alt="" "/> '+"</div>"
							}else if(data.data.list[i].jpxh =='3'){
								str = str + "<div class=\"lttp\">"+ '<img class="img3" src="img/jnk2.png" alt="" "/> '+"</div>"
							}else if(data.data.list[i].jpxh =='4'){
								str = str + "<div class=\"lttp\">"+ '<img class="img4" src="img/vip2.png" alt="" "/>'+"</div>"
							}


							str = str +"<div class=\"jpmz\">" ;
							str = str +'<div class=\"p1\">'+data.data.list[i].jpmc+'</div>';
							str = str +'<div class=\"p2\">'+data.data.list[i].zjsj+'</div>';
							if(data.data.list[i].isbj == 'Y')
							str = str +'<div class=\"ylq\">已领取</div>';
							str = str + "</div>";


							str = str + "</div>";

							if(data.data.list[i].isbj == 'Y') {
								str = str + "<div class=\"jp-nr-rt2\">" + strtxt + "</div>";

							} else {
								str = str + "<div class=\"jp-nr-rt\"  onclick=\"showtk(" + data.data.list[i].jpxh + "," + data.data.list[i].jpjlid + ")\" >" + strtxt + "</div>";

							}

							str = str + "</div>";
						}
						if(str != "") {
							$("#listd").html(str);
						}
						return
					}
				});
			}

			var showjpjiid = "-1";

			function showtk(jpxh, jpjlid) {
				showjpjiid = jpjlid
				$("#jptk" + jpxh).show();
			}

			function shiyong() {

				if(showjpjiid == "-1" || showjpjiid == "") return;
				//验证成功  向服务器注册
				$.ajax({
					url: api + '/chongyin/homepage/updateshiyongjp.do',
					data: {
						dh: dh,
						jpjlid: showjpjiid
					},
					dataType: "jsonp",
					jsonp: 'callback',
					success: function(data) {
					  $("#jptk1").hide();
					  $("#jptk2").hide();
					  $("#jptk3").hide();
					  $("#jptk4").hide();
						getwdhjlist();
						return
					}
				});

			}

			function choujian() {
				window.location.href = "index.html?dh=" + dh;
			}

			function htRem() {
				var ww = document.documentElement.clientWidth;
				if(ww > 540) {
					ww = 540
				}
				document.documentElement.style.fontSize = ww / 5.40 + "px"
			}
			htRem();
			window.onresize = function() {
				htRem();
			}
		</script>
	</head>

	<body style="height: 100%; background: #F1EFF0;">
		 <div class="hdtk-top">
     		<div class="fh">く</div>
     		<span style="margin-right: 1rem;">我的奖品</span>
     </div>
     <div style="height: 0.2rem;width: 100%;"> </div>
		<div id="listd">
			暂时还没有任何中奖记录
			</br></br></br>
			<a href="javascript:choujian()">去抽奖</a>
			<!--<div class="jp-nr">
				<div class="jp-nr-lt">
					<div class="lttp">
						<img src="img/收纳包2.png" alt=""  style="display: none;background-size:cover ;"/>
						<img src="img/vip2.png" alt="" style="display: none;background-size:cover ;"/>
						<img src="img/一元购2.png" alt="" style="display: none;background-size:cover ;"/>
						<img src="img/纪念卡2.png" alt=""style="display: none;background-size:cover ;"/>
					</div>
				<div class="jpmz">
						<div class="p1"></div>
						<div class="p2"></div>
					</div>
					<div class="ylq">已领取</div>
				</div>
				<div class="jp-nr-rt"></div>
			</div>-->
		</div>

		<div id="jptk1" class="jptk" style="display: none;">
			<div class="jptk-nr">
				<div class="zjimg">
					<img src="img/zjl.png" style="background-size: cover;" />
				</div>
				<div class="jp">
					<div class="tc" id="tc1">
						<div class="tcimg"></div>
					</div>
					<p>奖 品 : 宠 印 收 纳 包 × 1</p>
					<p class="lq">领取奖品时，请出示本页凭证。</p>
					<div class="jptp">
						<img src="img/snd2.png" style="background-size: cover;" />
					</div>
					<!--<input type="button" onclick="shiyong()">使用</input>-->
					<p class="lqjs">请及时到IDO24动漫周边摊位领取，实物奖品有限，先到先得（抽中并不代表一定可以领到奖品）</p>
					<div class="lqan">
						<div class="sy">标记已使用</div>
						<div class="zdl">知道了</div>
					</div>
				</div>
			</div>
		</div>
		<div id="jptk2" class="jptk" style="display: none;">
			<div class="jptk-nr">
				<div class="zjimg">
					<img src="img/zjl.png" style="background-size: cover;" />
				</div>
				<div class="jp">
					<div class="tc" id="tc2">
						<div class="tcimg"></div>
					</div>
					<p>奖 品 : 收纳包1元购券</p>
					<p class="lq">领取奖品时，请出示本页凭证。</p>
					<div class="jptp">
						<img src="img/yyg2.png" style="background-size: cover;" />
					</div>
					<p class="lqjs">请及时到IDO24动漫周边摊位领取，实物奖品有限，先到先得（抽中并不代表一定可以领到奖品）</p>
					<div class="lqan">
						<div class="sy">标记已使用</div>
						<div class="zdl">知道了</div>
					</div>
				</div>
			</div>
		</div>
		<div id="jptk3" class="jptk" style="display: none;">
			<div class="jptk-nr">
				<div class="zjimg">
					<img src="img/zjl.png" style="background-size: cover;" />
				</div>
				<div class="jp">
					<div class="tc" id="tc3">
						<div class="tcimg"></div>
					</div>
					<p>奖 品 : 宠印纪念卡x1</p>
					<p class="lq">领取奖品时，请出示本页凭证。</p>
					<div class="jptp">
						<img src="img/jnk.png" style="background-size: cover;" />
					</div>
					<p class="lqjs">请及时到IDO24动漫周边摊位领取，实物奖品有限，先到先得（抽中并不代表一定可以领到奖品）</p>
					<div class="lqan">
						<div class="sy">标记已使用</div>
						<div class="zdl">知道了</div>
					</div>
				</div>
			</div>
		</div>
		<div id="jptk4" class="jptk" style="display: none;">
			<div class="jptk-nr">
				<div class="zjimg">
					<img src="img/zjl.png" style="background-size: cover;" />
				</div>
				<div class="jp">
					<div class="tc" id="tc4">
						<div class="tcimg"></div>
					</div>
					<p>奖 品 : 宠印会员</p>
					<p class="lq">领取奖品时，请出示本页凭证。</p>
					<div class="jptp">
						<img src="img/snd2.png" style="background-size: cover;" />
					</div>
				<!--	<input type="button" onclick="shiyong()">使用</input>-->
                     <p class="lqjs">请及时到IDO24动漫周边摊位领取，实物奖品有限，先到先得（抽中并不代表一定可以领到奖品）</p>
					<div class="lqan">
						<div class="sy">标记已使用</div>
						<div class="zdl">知道了</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>
